<template>
	<view class="search">
		<u-navbar class="navbar" title-width="400" :title="title">
			<view slot="right" class="slot-wrap">
				<view class="img" @tap="collegeInfo" v-if="item.length != 0">
					<image src="/static/home/college2.png" v-if="item.is_collect == 1"></image>
					<image src="/static/home/college1.png" v-else></image>
				</view>
			</view>
		</u-navbar>
		<view class="" v-if="collectWhether">
			<view>
				<view class="video" v-if="is_video">
					<video :src="videoUrl" :autoplay="true"></video>
					<view class="video_btn" @tap="closeVideo">关闭</view>
				</view>
				<view class="exercises">
					<view class="title1" v-if="item.file_type == 1">{{ optionIndex + 1 }}、{{ item.title }}</view>
					<view class="title2" v-if="item.file_type == 4">
						<view>{{ optionIndex + 1 }}、{{ item.title }}</view>
						<view v-if="!listen" class="img" @tap="listenMusic(item.file)">
							<image src="/static/home/listen.png"></image>
							<text>点击播放题目</text>
						</view>
						<view v-else class="img" @tap="listenMusic2(item.file)">
							<image src="/static/home/listen2.png"></image>
							<text>点击暂停</text>
						</view>
					</view>
					<view class="title5" v-if="item.file_type == 5">
						<view class="qid">{{optionIndex + 1}}、</view>
						<view class="img">
							<view class="title5_content">{{item.title}}</view>
							<view v-for="(v, k) in item.file" :key="k">
								<view v-if="v.ext == 'mp3'" class="title5_mp3">
									<view v-if="!listen" class="mp3" @tap="listenMusic(v.path)">
										<image src="/static/home/listen.png"></image>
										<text>点击播放题目</text>
									</view>
									<view v-else class="mp3" @tap="listenMusic2(v.path)">
										<image src="/static/home/listen2.png"></image>
										<text>点击暂停</text>
									</view>
								</view>
								<view v-else class="title5_img">
									<image :src="v.path"></image>
								</view>
							</view>
						</view>
					</view>
					<view class="title7" v-if="item.file_type == 6">
						<view class="qid">{{optionIndex + 1}}、</view>
						<view class="img">
							<view>{{item.title}}</view>
							<view v-for="(v, k) in item.file" :key="k">
								<view v-if="v.ext == 'mp4'" class="title7_mp3">
									<image :src="v.path + '?vframe/jpg/offset/3'"></image>
									<image @tap="seeVideo(v.path)" class="play" src="/static/home/play.png"></image>
								</view>
								<view v-else class="title7_img">
									<image :src="v.path"></image>
								</view>

							</view>
						</view>
					</view>
					<view class="title4" v-if="item.file_type == 3">
						<view class="qid">{{ optionIndex + 1 }}、</view>
						<view class="img">
							<image src="/static/home/swipe.png"></image>
							<image @tap="seeVideo(item.file)" class="play" src="/static/home/play.png"></image>
						</view>
					</view>
					<view class="title6" v-if="item.file_type == 2">
						<view class="qid">{{ optionIndex + 1 }}、</view>
						<view class="img">
							<image @tap="getPreviewImage(item.file)" :src="item.file"></image>
							<!-- <image class="play" src="/static/home/play.png"></image> -->
						</view>
					</view>
					<view class="change1" v-for="(v, k) in item.option" :key="k" v-if="item.style == 1">
						<view class="option" @tap="selectOption(item.question_id, v.value)">
							<image src="/static/home/no.png" v-if="v.change == 1"></image>
							<image src="/static/home/selectError.png" v-if="v.change == 3"></image>
							<image src="/static/home/selectSuccess.png" v-if="v.change == 2"></image>
							<!-- <view class="option_x option_e">{{v.value}}</view> -->
							<view class="option_x" v-if="v.change == 1">{{ v.value }}. {{ v.title }}</view>
							<view class="option_x option_s" v-if="v.change == 2">{{ v.value }}. {{ v.title }}</view>
							<view class="option_x option_e" v-if="v.change == 3">{{ v.value }}. {{ v.title }}</view>
						</view>
					</view>
					<view class="change3" v-for="(v, k) in item.option" :key="k" v-if="item.style == 4">
						<view class="option" @tap="selectOption(item.question_id, v.value)">
							<image src="/static/home/no.png" v-if="v.change == 1"></image>
							<image src="/static/home/selectError.png" v-if="v.change == 3"></image>
							<image src="/static/home/selectSuccess.png" v-if="v.change == 2"></image>
							<view class="option_x" v-if="v.change == 1 && !v.is_music">
								<text>{{ v.value }}.</text>
								<image @tap.stop="listenMusic(v.title, k)" src="/static/home/changeListen.png"></image>
								<text>{{ v.duration }}s</text>
							</view>
							<view class="option_x" v-if="v.change == 1 && v.is_music">
								<text>{{ v.value }}.</text>
								<image @tap.stop="listenMusic3(v.title, k)" src="/static/home/listen2.png"></image>
								<text>暂停播放</text>
							</view>

							<view class="option_x option_s" v-if="v.change == 2 && !v.is_music">
								<text>{{ v.value }}.</text>
								<image @tap.stop="listenMusic(v.title, k)" src="/static/home/changeListen.png"></image>
								<text>{{ v.duration }}s</text>
							</view>
							<view class="option_x option_s" v-if="v.change == 2 && v.is_music">
								<text>{{ v.value }}.</text>
								<image @tap.stop="listenMusic3(v.title, k)" src="/static/home/listen2.png"></image>
								<text>暂停播放</text>
							</view>
							<view class="option_x option_e" v-if="v.change == 3 && !v.is_music">
								<text>{{ v.value }}.</text>
								<image @tap.stop="listenMusic(v.title, k)" src="/static/home/changeListen.png"></image>
								<text>{{ v.duration }}s</text>
							</view>
							<view class="option_x option_e" v-if="v.change == 3 && v.is_music">
								<text>{{ v.value }}.</text>
								<image @tap.stop="listenMusic3(v.title, k)" src="/static/home/listen2.png"></image>
								<text>暂停播放</text>
							</view>
						</view>
					</view>
					<view class="change4" v-for="(v, k) in item.option" :key="k" v-if="item.style == 3">
						<view class="option" @tap="selectOption(item.question_id, v.value)">
							<image src="/static/home/no.png" v-if="v.change == 1"></image>
							<image src="/static/home/selectError.png" v-if="v.change == 3"></image>
							<image src="/static/home/selectSuccess.png" v-if="v.change == 2"></image>
							<view class="option_x" v-if="v.change == 1">
								<text>{{ v.value }}.</text>
								<view class="img3">
									<image src="/static/home/swipe.png"></image>
									<image @tap.stop="seeVideo(v.title)" class="play" src="/static/home/play.png">
									</image>
								</view>
							</view>
							<view class="option_x option_s" v-if="v.change == 2">
								<text>{{ v.value }}.</text>
								<view class="img3">
									<image src="/static/home/swipe.png"></image>
									<image @tap.stop="seeVideo(v.title)" class="play" src="/static/home/play.png">
									</image>
								</view>
							</view>
							<view class="option_x option_e" v-if="v.change == 3">
								<text>{{ v.value }}.</text>
								<view class="img3">
									<image src="/static/home/swipe.png"></image>
									<image @tap.stop="seeVideo(v.title)" class="play" src="/static/home/play.png">
									</image>
								</view>
							</view>
						</view>
					</view>
					<view class="video5" v-if="item.style == 5">
						<view class="video_type" @tap="playVoice">
							<view class="typeImg">
								<image src="/static/home/video1.png"></image>
							</view>
							<view class="name">试听效果</view>
						</view>
						<view class="video_type" v-if="!isRecord" @tap="startRecord(0)">
							<view class="typeImg">
								<image src="/static/home/video2.png"></image>
							</view>
							<view class="name">开始录音</view>
						</view>
						<!-- 停止录音 -->
						<view class="video_type" v-else @tap="endRecord">
							<view class="typeImg">
								<image src="/static/home/video2.png"></image>
							</view>
							<view class="name">结束录音</view>
						</view>
						<view class="video_type" @tap="startRecord(1)">
							<view class="typeImg">
								<image src="/static/home/video3.png"></image>
							</view>
							<view class="name">重新录音</view>
						</view>
					</view>
					<view class="submit5" v-if="item.style == 5 && !is_submit" @tap="saveVideo">提交录音</view>
					<view class="submit6" v-if="item.style == 5 && is_submit" @tap="saveVideo2">已提交录音</view>
					<view class="change8" v-if="item.style == 2" v-for="(v, k) in item.option" :key="k">
						<view class="option" @tap="selectOption(item.question_id, v.value)">
							<image src="/static/home/no.png" v-if="v.change == 1"></image>
							<image src="/static/home/selectError.png" v-if="v.change == 3"></image>
							<image src="/static/home/selectSuccess.png" v-if="v.change == 2"></image>
							<view class="option_x" v-if="v.change == 1">
								<text>{{ v.value }}.</text>
								<view class="img3">
									<image @tap.stop="getPreviewImage(v.title)" :src="v.title"></image>
								</view>
							</view>
							<view class="option_x option_s" v-if="v.change == 2">
								<text>{{ v.value }}.</text>
								<view class="img3">
									<image @tap.stop="getPreviewImage(v.title)" :src="v.title"></image>
								</view>
							</view>
							<view class="option_x option_e" v-if="v.change == 3">
								<text>{{ v.value }}.</text>
								<view class="img3">
									<image @tap.stop="getPreviewImage(v.title)" :src="v.title"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="line" v-if="type == 1"></view> -->
			<view class="parsing">
				<!-- <view class="parsing" v-if="item.answer_analysis"> -->
				<!-- 答案解析 start -->
				<view class="" v-if="is_submit && item.file_type == 5 || item.file_type == 6">
					<view class="parsing_x">答案解析：</view>
					<view class="answer_details" v-html="item.analyze"></view>
					<view class="answer_mp3">
						<view v-for="(v, k) in item.analyze_file">
							<view class="mp3" v-if="v.ext == 'mp3'">
								<view v-if="!analyze_listen" class="mp3_x" @tap="listenMusic(v.path, 2)">
									<image src="/static/home/listen.png"></image>
									<text>点击播放解析</text>
								</view>
								<view v-else class="mp3_x" @tap="listenMusic2(v.path, 2)">
									<image src="/static/home/listen2.png"></image>
									<text>点击暂停</text>
								</view>
							</view>
							<view class="mp4" v-else>
								<image :src="v.path + '?vframe/jpg/offset/3'"></image>
								<image @tap="seeVideo(v.path, 1)" class="play" src="/static/home/play.png"></image>
							</view>
						</view>
					</view>
				</view>
				<!-- 答案解析 end -->
				<view v-if="item.answer_analysis">
					<view class="select2" v-if="item.disabled == 2">
						<text class="iconfont">&#xe606;</text>
						<text class="change">选择正确</text>
					</view>
					<view class="select" v-if="item.disabled == 3">
						<text class="iconfont">&#xe68b;</text>
						<text class="change">选择错误</text>
					</view>

					<!-- 答案解析 start -->
					<view class="answer">答案：{{ item.right_answer }}</view>
					<view class="parsing_x">答案解析：</view>
					<view class="answer_details" v-html="item.analyze"></view>
					<view class="answer_mp3">
						<view v-for="(v, k) in item.analyze_file">
							<view class="mp3" v-if="v.ext == 'mp3'">
								<view v-if="!analyze_listen" class="mp3_x" @tap="listenMusic(v.path, 2)">
									<image src="/static/home/listen.png"></image>
									<text>点击播放解析</text>
								</view>
								<view v-else class="mp3_x" @tap="listenMusic2(v.path, 2)">
									<image src="/static/home/listen2.png"></image>
									<text>点击暂停</text>
								</view>
							</view>
							<view class="mp4" v-else>
								<image :src="v.path + '?vframe/jpg/offset/3'"></image>
								<image @tap="seeVideo(v.path, 1)" class="play" src="/static/home/play.png"></image>
							</view>
						</view>
					</view>
				</view>
				<!-- 答案解析 end -->

			</view>
			<view class="nextOption">
				<view class="up" @tap="getUp">上一题</view>
				<view class="down" @tap="getNext">下一题</view>
			</view>
			<view class="footer">
				<view class="total" @tap="getTotal">
					<image src="/static/home/total.png"></image>
				</view>
				<!-- <view class="college">我的收藏</view> -->
				<view class="error" @tap="handleJump" :data-url="`../wrongTopic/wrongTopic`">我的错题集</view>
			</view>
		</view>

		<noData text="您收藏的被外星人偷走了" v-if="item.length == 0 && load"></noData>

		<!-- 第一题提示 -->
		<inquiryPop :showPopup="showPopup" :showTitle="showTitle" :showCancel="false" @confirm="confirm"></inquiryPop>
		<!-- 最后一题展示 -->
		<inquiryPop :showPopup="showPopup2" :showTitle="showTitle2" :showCancel="false" @confirm="confirm2">
		</inquiryPop>
		<!-- 收藏弹框 -->
		<successPop :showPopup="showPopup3" :showTitle="showTitle3" :showCancel="false" @confirm="confirm3">
		</successPop>
		<!-- 题目列表 -->
		<u-popup v-model="totalShow" mode="bottom" height="70%" border-radius="16">
			<view class="questionTotal">
				<block v-for="(v, k) in questionData" :key="k">
					<view class="questionNumber" v-if="v.disabled == 1" @tap="changeQuestion(k)">{{ k + 1 }}</view>
					<view class="questionNumber questionNumber_s" v-if="v.disabled == 2" @tap="changeQuestion(k)">
						{{ k + 1 }}
					</view>
					<view class="questionNumber questionNumber_e" v-if="v.disabled == 3" @tap="changeQuestion(k)">
						{{ k + 1 }}
					</view>
				</block>
			</view>
		</u-popup>
		<!-- 录音组件 -->
		<!-- <sound-recording  ref="soundRecording" :showTop="true" maximum="20"></sound-recording> -->

		<wm-watermark :text="watermark"></wm-watermark>

		<!-- 录音弹框 start -->
		<u-popup v-model="soundShow" mode="center" :mask-close-able="false" border-radius="16" width="80%" height="350">
			<view class="soundPopup">
				<view>录音中</view>
				<image src="/static/home/sound.gif"></image>
				<view class="sound_footer">
					<view class="footer1" @tap="closeSound">取消</view>
					<view class="footer2" @tap="endRecord">结束录音</view>
				</view>
			</view>
		</u-popup>
		<!-- 录音弹框 end -->
	</view>
</template>

<script>
	import noData from '@/components/xs-components/noData.vue';
	import inquiryPop from '@/components/xs-components/success-pop/inquiry-pop.vue';
	import successPop from '@/components/xs-components/success-pop/success-pop.vue';
	// import soundRecording from '@/components/sound-recording/sound-recording.vue'
	import wmWatermark from "@/components/wm-watermark/wm-watermark.vue";

	const recorderManager = uni.getRecorderManager();
	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = false;
	export default {
		data() {
			return {
				load: false,
				showPopup: false,
				showPopup2: false,
				showPopup3: false,
				totalShow: false,
				showTitle: '当前已经是第一题，没有上一题了哦~',
				showTitle2: '已经是最后一题，没有下一题了哦~',
				showTitle3: '收藏成功',
				// 页面头部
				title: '',
				type: 1,
				chapter_id: '',
				// 是否随机  1是0否
				random: 0,
				questionData: [],
				optionIndex: 0,
				item: '',
				answer_info: [],
				// 题目列表
				question_total: [],
				videoUrl: '',
				is_video: false,
				isRecord: false,
				voicePath: '',
				// 选择的答案
				answerValue: '',
				collectWhether: false,
				listen: false,

				watermark: '航海人',
				analyze_listen: false,
				soundShow: false, // 录音弹窗


				is_sound: false, // 是否重新录音
				is_submit: false, // 是否提交录音
			};
		},
		components: {
			inquiryPop,
			successPop,
			noData,
			wmWatermark
		},
		onLoad(option) {
			if (option.chapter_id == undefined) {
				this.chapter_id = '';
			} else {
				this.chapter_id = option.chapter_id;
			}
			console.log(option.chapter_id);
			uni.showLoading({
				title: '加载中'
			});
			this.questionInfo();
			let self = this;
			recorderManager.onStop(function(res) {
				console.log('recorder stop' + JSON.stringify(res));
				self.voicePath = res.tempFilePath;
			});
		},
		onShow() {},
		onUnload() {
			innerAudioContext.stop()
		},
		onHide() {
			innerAudioContext.stop()
		},
		methods: {
			// 上一题
			getUp() {
				this.is_video = false;
				if (this.optionIndex == 0) {
					this.showPopup = true;
				} else {
					this.analyze_listen = false;

					this.optionIndex--;
					this.item = this.questionData[this.optionIndex];
					this.title = '顺序练习（' + (Number(this.optionIndex) + 1) + '/' + this.questionData.length + ')';
					if (this.questionData[this.optionIndex].videoPath) {
						this.voicePath = this.questionData[this.optionIndex].videoPath;
					}
					innerAudioContext.stop();
				}
			},
			// 下一题
			getNext() {
				this.is_video = false;
				if (this.optionIndex == this.questionData.length - 1) {
					this.showPopup2 = true;
				} else {
					this.analyze_listen = false;

					this.optionIndex++;
					this.item = this.questionData[this.optionIndex];
					this.title = '顺序练习（' + (Number(this.optionIndex) + 1) + '/' + this.questionData.length + ')';
					if (this.questionData[this.optionIndex].videoPath) {
						this.voicePath = this.questionData[this.optionIndex].videoPath;
					}
					// this.answer_analysis = false
					innerAudioContext.stop();
				}
			},
			confirm() {
				this.showPopup = false;
			},
			confirm2() {
				this.showPopup2 = false;
			},
			confirm3() {
				this.showPopup3 = false;
			},
			// 收藏
			is_college() {
				this.showPopup3 = true;
			},
			// 关闭视频
			closeVideo() {
				this.is_video = false;
			},
			// 题目列表
			questionInfo() {
				this.$api.post(global.apiUrls.myCollection, {
					chapter_id: this.chapter_id
				}).then(res => {
					console.log(res);
					uni.hideLoading();
					this.load = true;
					if (res.data.code == 1) {
						if (res.data.data.length == 0) return (this.title = '我的收藏');
						this.collectWhether = true;

						this.questionData = res.data.data;
						this.title = '顺序练习（' + (Number(this.optionIndex) + 1) + '/' + this.questionData.length +
							')';

						for (let k in this.questionData) {
							this.questionData[k].disabled = 1;
							this.questionData[k].answer_analysis = false;
							this.questionData[k].videoPath = '';
							// for (let x = 0;x< this.questionData[k].option.length; x++) {
							// 	this.questionData[k].option[x].textValue  = ''
							// }
							this.question_total.push({
								id: Number(k) + 1,
								answer: ''
							});
							// this.question_total = this.question_1.length
							// console.log(this.question_total)
							this.answer_info.push({
								id: this.questionData[k].question_id,
								option_id: ''
							});
							for (let i = 0; i < this.questionData[k].option.length; i++) {
								this.questionData[k].option[i].change = 1;
								if (i == 0) {
									this.questionData[k].option[0].value = 'A';
								}
								if (i == 1) {
									this.questionData[k].option[1].value = 'B';
								}
								if (i == 2) {
									this.questionData[k].option[2].value = 'C';
								}
								if (i == 3) {
									this.questionData[k].option[3].value = 'D';
								}
								if (i == 4) {
									this.questionData[k].option[4].value = 'E';
								}
								if (i == 5) {
									this.questionData[k].option[5].value = 'F';
								}
								if (i == 6) {
									this.questionData[k].option[6].value = 'G';
								}
								if (i == 7) {
									this.questionData[k].option[7].value = 'H';
								}
								if (i == 8) {
									this.questionData[k].option[8].value = 'I';
								}
							}
						}
						this.item = this.questionData[0];
						console.log(this.questionData);
					} else {
						this.$message.info(res.data.msg);
					}
				});
			},
			// 题目列表
			getTotal() {
				this.totalShow = !this.totalShow;
			},
			// 选择答案
			selectOption(question_id, answerValue) {
				if (this.item.answer_analysis) {} else {
					this.questionData[this.optionIndex].answer_analysis = true;
					this.answerValue = answerValue;
					if (answerValue == this.item.right_answer) {
						for (let a = 0; a < this.item.option.length; a++) {
							if (answerValue == this.item.option[a].value) {
								this.questionData[this.optionIndex].option[a].change = 2;
							}
						}
						this.questionData[this.optionIndex].disabled = 2;
						this.$forceUpdate();
					} else {
						for (let a = 0; a < this.item.option.length; a++) {
							if (answerValue == this.item.option[a].value) {
								this.questionData[this.optionIndex].option[a].change = 3;
							}
							if (this.item.right_answer == this.item.option[a].value) {
								this.questionData[this.optionIndex].option[a].change = 2;
							}
						}
						this.questionData[this.optionIndex].disabled = 3;
						this.$forceUpdate();
						// console.log(this.questionData)
						this.addWrong();
					}
				}
			},
			// 收藏
			collegeInfo() {
				if (this.questionData[this.optionIndex].is_collect == 0) {
					this.$api
						.post(global.apiUrls.getCollection, {
							question_id: this.questionData[this.optionIndex].question_id
						})
						.then(res => {
							if (res.data.code == 1) {
								this.questionData[this.optionIndex].is_collect = 1;
								this.showPopup3 = true;
							} else {
								this.$message.info(res.data.msg);
							}
						});
				} else {
					this.$api
						.post(global.apiUrls.cancelCollection, {
							question_id: this.questionData[this.optionIndex].question_id
						})
						.then(res => {
							this.$message.info(res.data.msg);
							if (res.data.code == 1) {
								this.questionData[this.optionIndex].is_collect = 0;
							}
						});
				}
			},
			// 选择题目
			changeQuestion(k) {
				this.optionIndex = k;
				this.item = this.questionData[this.optionIndex];
				this.title = '顺序练习（' + (Number(this.optionIndex) + 1) + '/' + this.questionData.length + ')';
				this.totalShow = false;
			},

			// 听力题（题目）
			listenMusic(musicUrl, k) {
				console.log(musicUrl)
				if (k == 2) {
					this.analyze_listen = true
					this.listen = false
					this.questionData[this.optionIndex].option.forEach((v, k) => {
						v.is_music = false
					})
					innerAudioContext.src = musicUrl
					innerAudioContext.volume = 1
					innerAudioContext.play()
					innerAudioContext.onError((res) => {
						console.log(res)
						this.$message.info('播放失败，请稍后再试')
						this.analyze_listen = false
						return
					})
					this.$forceUpdate()
					innerAudioContext.onEnded((res) => {
						this.questionData[this.optionIndex].option[k].is_music = false
						this.$forceUpdate()
					})
					return
				}
				if (k != undefined) {
					this.analyze_listen = false
					this.listen = false
					this.questionData[this.optionIndex].option.forEach((v, k) => {
						v.is_music = false
					})
					this.questionData[this.optionIndex].option[k].is_music = true
					innerAudioContext.src = musicUrl
					innerAudioContext.volume = 1
					innerAudioContext.play()
					innerAudioContext.onError((res) => {
						console.log(res)
						this.$message.info('播放失败，请稍后再试')
						this.questionData[this.optionIndex].option[k].is_music = false
						return
					})
					this.$forceUpdate()
					innerAudioContext.onEnded((res) => {
						this.questionData[this.optionIndex].option[k].is_music = false
						this.$forceUpdate()
					})
				} else {
					this.questionData[this.optionIndex].option.forEach((v, k) => {
						v.is_music = false
					})
					innerAudioContext.src = musicUrl
					innerAudioContext.volume = 1
					innerAudioContext.play()
					innerAudioContext.onError((res) => {
						console.log(res)
						this.$message.info('播放失败，请稍后再试')
						this.listen = false
						return
					})
					this.listen = true
					this.analyze_listen = false
				}
				// console.log(k)
				// console.log(musicUrl)

			},
			// 题目暂停
			listenMusic2(audio, id) {
				if (id == undefined) {
					if (this.listen) {
						innerAudioContext.pause()
						this.listen = false
					} else {
						innerAudioContext.play()
						this.listen = true
					}
				} else {
					if (this.analyze_listen) {
						innerAudioContext.pause()
						this.analyze_listen = false
					} else {
						innerAudioContext.play()
						this.analyze_listen = true
					}
				}

				innerAudioContext.onEnded((res) => {
					this.listen = false
					this.analyze_listen = false
				})
			},
			// 选项暂停
			listenMusic3(musicUrl, k) {
				// if ()
				if (this.questionData[this.optionIndex].option[k].is_music) {
					innerAudioContext.pause();
					this.questionData[this.optionIndex].option[k].is_music = false;
					this.$forceUpdate();
				} else {
					innerAudioContext.play();
					this.questionData[this.optionIndex].option[k].is_music = true;
					this.$forceUpdate();
				}
			},
			// 看视频
			seeVideo(videoUrl, index) {
				this.videoUrl = videoUrl
				this.is_video = true
				if (index == 1) {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					});
				}
			},
			// 预览图片
			getPreviewImage(imgUrl) {
				// var imgArr = [];
				// imgArr.push(imgUrl);
				// //预览图片
				// uni.previewImage({
				// 	urls: imgArr,
				// 	current: imgArr[0]
				// });
			},
			// 开始录音/重新录音
			startRecord() {
				// this.$refs.soundRecording.show()
				this.isRecord = '';
				console.log('开始录音');
				recorderManager.start();
				this.isRecord = true;
				this.soundShow = true;
				this.analyze_listen = false;
			},
			// 结束录音
			endRecord() {
				console.log('录音结束');
				recorderManager.stop();
				this.isRecord = false;
			},
			// 试听录音
			playVoice() {
				console.log('播放录音');
				this.analyze_listen = false;
				if (this.voicePath) {
					innerAudioContext.src = this.voicePath;
					innerAudioContext.play();
				}
			},
			// 提交录音
			saveVideo() {
				console.log(this.voicePath)
				let that = this
				if (!that.voicePath) {
					this.$message.info('请先录音')
					return false
				}
				uni.showLoading({
					title: '保存中'
				})
				uni.uploadFile({
					url: global.API_BASE_URL + global.apiUrls.upLoadVideo, //仅为示例，非真实的接口地址
					filePath: that.voicePath,
					name: 'file',
					success: uploadFileRes => {
						that.questionData[that.optionIndex].videoPath = JSON.parse(uploadFileRes.data).data[0]
							.path;
						// console.log(that.questionData)
						that.questionData[that.optionIndex].disabled = 2;
						that.is_submit = true;
						that.$message.info('保存成功');
						// this.$forceUpdate()
					},
					fail: function(err) {
						console.log(err);
					}
				});
				// that.questionData[that.optionIndex].videoPath = that.voicePath
			},
			// 已提交录音
			saveVideo2() {
				this.$message.info('已提交过录音')
			},
			// 添加错题
			addWrong() {
				this.$api
					.post(global.apiUrls.addWrongQuestion, {
						question_id: this.questionData[this.optionIndex].question_id,
						answer: this.answerValue
					})
					.then(res => {
						console.log(res);
						if (res.data.code == 0) {
							this.$message.info(res.data.msg);
						}
					});
			},
			// 取消录音
			closeSound() {
				this.soundShow = false
				this.isRecord = false
				recorderManager.stop();
				setTimeout(() => {
					this.voicePath = ''
				}, 500)
			},
			// 结束录音
			endRecord() {
				console.log('录音结束');
				recorderManager.stop();
				this.is_sound = true
				this.isRecord = false
				this.soundShow = false
				this.is_submit = false
			},
		}
	};
</script>

<style lang="scss" scoped>
	// page {
	// 	background: #FFFFFF;
	// 	height: 100%;
	// 	color: #333333;
	// }
	.search {

		// padding: 24upx 32upx;
		.navbar {}

		.slot-wrap {
			.img {
				width: 38rpx;
				height: 38rpx;
				margin-right: 32rpx;
				transform: translateY(-4rpx);

				image {
					width: 38rpx;
					height: 38rpx;
				}
			}
		}

		.exercises {
			padding: 32rpx 32rpx 190rpx;

			.title1 {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 48rpx;
				color: #333333;
				margin-bottom: 56rpx;
			}

			.title2 {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 48rpx;
				color: #333333;
				margin-bottom: 56rpx;
				word-break: keep-all;

				.img {
					margin-top: 28rpx;

					image {
						width: 56rpx;
						height: 56rpx;
						// margin-top: 28rpx;
						vertical-align: middle;
						margin-right: 18rpx;
						transform: translateY(-5rpx);
					}

					text {
						color: #267dff;
						font-weight: 500;
					}
				}
			}

			.title3 {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 48rpx;
				color: #333333;
				margin-bottom: 56rpx;
				word-break: keep-all;

				.img {
					margin-top: 28rpx;

					image {
						width: 56rpx;
						height: 56rpx;
						// margin-top: 28rpx;
						vertical-align: middle;
						margin-right: 18rpx;
						transform: translateY(-5rpx);
					}

					text {
						color: #267dff;
						font-weight: 500;
					}
				}
			}

			.title4 {
				display: flex;
				margin-bottom: 30rpx;
				position: relative;

				.qid {
					margin-right: 8rpx;
				}

				.img {
					width: 560rpx;
					height: 240rpx;

					image {
						width: 100%;
						height: 100%;
					}

					.play {
						width: 80rpx;
						height: 80rpx;
						position: absolute;
						top: 80rpx;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}

			.title5 {
				display: flex;
				margin-bottom: 106rpx;
				position: relative;

				.qid {
					margin-right: 8rpx;
				}

				.img {
					.title5_content {
						margin-bottom: 8rpx;
					}

					.title5_img {
						width: 560rpx;
						height: 240rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
						}
					}

					.title5_mp3 {
						.mp3 {
							margin-top: 20rpx;

							image {
								width: 56rpx;
								height: 56rpx;
								// margin-top: 28rpx;
								vertical-align: middle;
								margin-right: 18rpx;
								transform: translateY(-5rpx);
							}

							text {
								color: #267DFF;
								font-weight: 500;
							}
						}
					}

					// image {
					// 	width: 100%;
					// 	height: 100%;
					// }

					.play {
						width: 80rpx;
						height: 80rpx;
						position: absolute;
						top: 80rpx;
						left: 50%;
						transform: translateX(-50%);
					}
				}

			}

			.title7 {
				display: flex;
				// margin-bottom: 106rpx;
				position: relative;

				.qid {
					margin-right: 8rpx;
				}

				.img {
					.title7_mp3 {
						position: relative;
						margin: 8rpx 0;
						width: 560rpx;
						height: 240rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
						}

						.play {
							width: 80rpx;
							height: 80rpx;
							position: absolute;
							top: 80rpx;
							left: 50%;
							transform: translateX(-50%);
						}
					}

					.title7_img {
						width: 560rpx;
						height: 240rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
						}

					}
				}
			}

			.title6 {
				display: flex;
				margin-bottom: 106rpx;
				position: relative;

				.qid {
					margin-right: 8rpx;
				}

				.img {
					width: 560rpx;
					height: 240rpx;

					image {
						width: 100%;
						height: 100%;
					}

					.play {
						width: 80rpx;
						height: 80rpx;
						position: absolute;
						top: 80rpx;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}


			.title8 {
				display: flex;
				margin-bottom: 30rpx;
				position: relative;

				.qid {
					margin-right: 8rpx;
				}

				.img {}
			}

			.change1 {

				// margin-bottom: 400rpx;
				.option {
					width: 100%;
					margin-bottom: 49rpx;
					// display:flex;

					image {
						width: 36rpx !important;
						height: 36rpx;
						vertical-align: top;
						margin-right: 14rpx;
						display: inline-block;
						transform: translateY(6rpx);
					}

					.option_x {
						width: calc(100% - 50rpx);
						padding: 8rpx 0;
						display: inline-block;
						padding-left: 12rpx;
						border-radius: 4rpx;
					}

					.option_e {
						width: calc(100% - 50rpx);
						padding: 8rpx 0;
						display: inline-block;
						background: #fff1f1;
						color: #ff4040;
						padding-left: 12rpx;
						border-radius: 4rpx;
					}

					.option_s {
						width: calc(100% - 50rpx);
						padding: 8rpx 0;
						display: inline-block;
						background: #eaf3ff;
						color: #267dff;
						padding-left: 12rpx;
						border-radius: 4rpx;
					}
				}

				.option_error {}
			}

			.change2 {

				// margin-bottom: 400rpx;
				.option {
					width: 100%;
					margin-bottom: 49rpx;
					// display:flex;

					image {
						width: 36rpx !important;
						height: 36rpx;
						vertical-align: top;
						margin-right: 14rpx;
						display: inline-block;
						transform: translateY(11rpx);
					}

					.option_x {
						width: calc(100% - 50rpx);
						padding: 8rpx 0;
						display: inline-block;
						padding-left: 12rpx;
						border-radius: 4rpx;
					}

					.option_e {
						width: calc(100% - 50rpx);
						padding: 8rpx 0;
						display: inline-block;
						background: #fff1f1;
						color: #ff4040;
						padding-left: 12rpx;
						border-radius: 4rpx;
					}

					.option_s {
						width: calc(100% - 50rpx);
						padding: 8rpx 0;
						display: inline-block;
						background: #eaf3ff;
						color: #267dff;
						padding-left: 12rpx;
						border-radius: 4rpx;
					}
				}
			}

			.change3 {
				.option {
					width: 100%;
					margin-bottom: 49rpx;
					// display:flex;

					image {
						width: 36rpx !important;
						height: 36rpx;
						vertical-align: top;
						margin-right: 14rpx;
						display: inline-block;
						transform: translateY(11rpx);
					}

					.option_x {
						width: calc(100% - 50rpx);
						padding: 8rpx 0;
						display: inline-block;
						padding-left: 12rpx;
						border-radius: 4rpx;

						image {
							width: 48rpx;
							height: 48rpx;
							vertical-align: middle;
							margin: 0 20rpx 0 30rpx;
							transform: translateY(-4rpx);
						}
					}

					.option_e {
						width: calc(100% - 50rpx);
						padding: 8rpx 0;
						display: inline-block;
						background: #fff1f1;
						color: #ff4040;
						padding-left: 12rpx;
						border-radius: 4rpx;
					}

					.option_s {
						width: calc(100% - 50rpx);
						padding: 8rpx 0;
						display: inline-block;
						background: #eaf3ff;
						color: #267dff;
						padding-left: 12rpx;
						border-radius: 4rpx;
					}
				}

				.option_error {}
			}

			.change4 {
				.option {
					width: 100%;
					margin-bottom: 49rpx;
					// display:flex;

					image {
						width: 36rpx;
						height: 36rpx;
						vertical-align: top;
						margin-right: 14rpx;
						display: inline-block;
						transform: translateY(11rpx);
					}

					.option_x {
						width: calc(100% - 50rpx);
						padding: 8rpx 0;
						display: inline-block;
						padding-left: 12rpx;
						border-radius: 4rpx;

						.img3 {
							margin-left: 13rpx;
							transform: translateY(-8rpx);
							display: inline-block;
							position: relative;
							width: 214rpx !important;
							height: 134rpx !important;

							image {
								width: 100%;
								height: 100%;
							}

							.play {
								width: 40rpx;
								height: 40rpx;
								position: absolute;
								top: 58rpx;
								left: 50%;
								transform: translateX(-50%);
							}
						}
					}

					.option_e {
						width: calc(100% - 50rpx);
						padding: 8rpx 0;
						display: inline-block;
						background: #fff1f1;
						color: #ff4040;
						padding-left: 12rpx;
						border-radius: 4rpx;
					}

					.option_s {
						width: calc(100% - 50rpx);
						padding: 8rpx 0;
						display: inline-block;
						background: #eaf3ff;
						color: #267dff;
						padding-left: 12rpx;
						border-radius: 4rpx;
					}
				}
			}

			.video5 {
				display: flex;
				width: 100%;
				text-align: center;

				.video_type {
					flex: 3.3;

					.typeImg {
						width: 72rpx;
						height: 72rpx;
						margin: 0 auto 26rpx;

						image {
							width: 72rpx;
							height: 72rpx;
						}
					}

					.name {
						font-weight: 500;
					}
				}
			}

			.submit5 {
				width: 210rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				background: #267dff;
				opacity: 1;
				border-radius: 36rpx;
				color: #ffffff;
				font-size: 28rpx;
				margin: 97rpx auto 0;
			}

			.submit6 {
				width: 210rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				background: #3C8DBC;
				opacity: 1;
				border-radius: 36rpx;
				color: #FFFFFF;
				font-size: 28rpx;
				margin: 97rpx auto 0;
			}

			.change8 {
				.option {
					width: 100%;
					margin-bottom: 49rpx;
					// display:flex;

					image {
						width: 36rpx;
						height: 36rpx;
						vertical-align: top;
						margin-right: 14rpx;
						display: inline-block;
						transform: translateY(11rpx);
					}

					.option_x {
						width: calc(100% - 50rpx);
						padding: 8rpx 0;
						display: inline-block;
						padding-left: 12rpx;
						border-radius: 4rpx;

						.img3 {
							margin-left: 13rpx;
							transform: translateY(-8rpx);
							display: inline-block;
							position: relative;
							width: 245rpx !important;
							height: 220rpx !important;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}

					.option_e {
						width: calc(100% - 50rpx);
						padding: 8rpx 0;
						display: inline-block;
						background: #fff1f1;
						color: #ff4040;
						padding-left: 12rpx;
						border-radius: 4rpx;
					}

					.option_s {
						width: calc(100% - 50rpx);
						padding: 8rpx 0;
						display: inline-block;
						background: #eaf3ff;
						color: #267dff;
						padding-left: 12rpx;
						border-radius: 4rpx;
					}
				}
			}
		}

		.exercisesEnglishNo {
			padding: 32rpx;

			.change3 {
				.option {
					width: 100%;
					margin-bottom: 49rpx;
					// display:flex;

					image {
						width: 36rpx !important;
						height: 36rpx;
						vertical-align: top;
						margin-right: 14rpx;
						display: inline-block;
						transform: translateY(11rpx);
					}

					.option_x {
						width: calc(100% - 50rpx);
						padding: 8rpx 0;
						display: inline-block;
						padding-left: 12rpx;
						border-radius: 4rpx;

						image {
							width: 48rpx;
							height: 48rpx;
							vertical-align: middle;
							margin: 0 20rpx 0 30rpx;
							transform: translateY(-4rpx);
						}
					}

					.option_e {
						width: calc(100% - 50rpx);
						padding: 8rpx 0;
						display: inline-block;
						background: #fff1f1;
						color: #ff4040;
						padding-left: 12rpx;
						border-radius: 4rpx;
					}

					.option_s {
						width: calc(100% - 50rpx);
						padding: 8rpx 0;
						display: inline-block;
						background: #eaf3ff;
						color: #267dff;
						padding-left: 12rpx;
						border-radius: 4rpx;
					}
				}

				.option_error {}
			}
		}

		.imgRecording {
			padding: 32rpx 32rpx 200rpx;

			.video {
				display: flex;
				width: 100%;
				text-align: center;

				.video_type {
					flex: 3.3;

					.typeImg {
						width: 72rpx;
						height: 72rpx;
						margin: 0 auto 26rpx;

						image {
							width: 72rpx;
							height: 72rpx;
						}
					}

					.name {
						font-weight: 500;
					}
				}
			}

			.submit {
				width: 210rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				background: #267dff;
				opacity: 1;
				border-radius: 36rpx;
				color: #ffffff;
				font-size: 28rpx;
				margin: 97rpx auto 0;
			}
		}

		.listenRecording {
			padding: 32rpx 32rpx 200rpx;

			.video {
				display: flex;
				width: 100%;
				text-align: center;

				.video_type {
					flex: 3.3;

					.typeImg {
						width: 72rpx;
						height: 72rpx;
						margin: 0 auto 26rpx;

						image {
							width: 72rpx;
							height: 72rpx;
						}
					}

					.name {
						font-weight: 500;
					}
				}
			}

			.submit {
				width: 210rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				background: #267dff;
				opacity: 1;
				border-radius: 36rpx;
				color: #ffffff;
				font-size: 28rpx;
				margin: 97rpx auto 0;
			}
		}

		.imgTopic {
			padding: 32rpx 32rpx 200rpx;
		}

		.nextOption {
			width: 100%;
			display: flex;
			position: fixed;
			bottom: 100rpx;
			text-align: center;
			background: #ffffff;
			padding-bottom: 48rpx;
			padding-top: 10rpx;
			z-index: 1;

			.up {
				margin: 0 64rpx 0 132rpx;
				width: 210rpx;
				height: 72rpx;
				line-height: 72rpx;
				border: 1rpx solid #267dff;
				opacity: 1;
				border-radius: 36rpx;
				color: #267dff;
				font-size: 28rpx;
			}

			.down {
				font-size: 28rpx;
				width: 210rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: #267dff;
				opacity: 1;
				border-radius: 36rpx;
				color: #ffffff;
			}
		}

		.line {
			width: 100%;
			height: 16rpx;
			background: #f5f6f7;
		}

		.parsing {
			padding: 26rpx 32rpx 250rpx;

			.select {
				color: #ff4040;
				margin-bottom: 16rpx;

				.iconfont {
					font-size: 38rpx;
					margin-right: 16rpx;
					display: inline-block;
					transform: translateY(2rpx);
				}

				.change {
					font-weight: bold;
				}
			}

			.select2 {
				color: #267dff;
				margin-bottom: 16rpx;

				.iconfont {
					font-size: 38rpx;
					margin-right: 16rpx;
					display: inline-block;
					transform: translateY(2rpx);
				}

				.change {
					font-weight: bold;
				}
			}

			// .answer {
			// 	color: #267dff;
			// 	font-weight: bold;
			// 	margin-bottom: 16rpx;
			// }

			.answer {
				padding: 32rpx;

				.a_title {
					text {
						color: #ff4040;
						margin-left: 30upx;
					}
				}

				.a_mp3 {
					margin-top: 28rpx;

					image {
						width: 56rpx;
						height: 56rpx;
						// margin-top: 28rpx;
						vertical-align: middle;
						margin-right: 18rpx;
						transform: translateY(-5rpx);
					}

					.title {
						color: #333333;
						margin-right: 10upx;
					}

					text {
						color: #267dff;
						font-weight: 500;
					}

					// text{}
					// image{}
				}
			}

			.parsing_x {
				font-weight: bold;
				margin-bottom: 16rpx;
			}

			.answer_details {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 54rpx;
				color: #333333;
			}

			.answer_mp3 {
				.mp3 {
					.mp3_x {
						margin-top: 28rpx;

						image {
							width: 56rpx;
							height: 56rpx;
							// margin-top: 28rpx;
							vertical-align: middle;
							margin-right: 18rpx;
							transform: translateY(-5rpx);
						}

						text {
							color: #267DFF;
							font-weight: 500;
						}
					}
				}

				.mp4 {
					position: relative;
					margin: 8rpx 0;
					width: 680rpx;
					height: 240rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 8rpx;
					}

					.play {
						width: 80rpx;
						height: 80rpx;
						position: absolute;
						top: 80rpx;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}

		}

		.footer {
			display: flex;
			justify-content: space-between;
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 100rpx;
			background: #ffffff;
			box-shadow: 0px -1rpx 8rpx rgba(0, 0, 0, 0.1);
			opacity: 1;
			line-height: 100rpx;
			padding: 0 32rpx;
			padding-top: 14rpx;

			.total {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.college {
				width: 210rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				background: #f4b326;
				opacity: 1;
				border-radius: 36rpx;
				color: #ffffff;
				font-size: 28rpx;
				margin: 0 40rpx 0 178rpx;
			}

			.error {
				width: 210rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				background: #267dff;
				opacity: 1;
				border-radius: 36rpx;
				color: #ffffff;
				font-size: 28rpx;
			}
		}

		.questionTotal {
			padding: 32rpx;

			.questionNumber {
				float: left;
				margin-right: 36rpx;
				margin-bottom: 32rpx;
				width: 84rpx;
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
				border-radius: 50%;
				border: 1rpx solid #bfbfbf;
			}

			.questionNumber:nth-child(6n + 6) {
				margin-right: 0;
			}

			.questionNumber_s {
				width: 84rpx;
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
				border-radius: 50%;
				border: 1rpx solid #267dff;
				color: #267dff;
			}

			.questionNumber_e {
				width: 84rpx;
				height: 84rpx;
				line-height: 84rpx;
				text-align: center;
				border-radius: 50%;
				border: 1rpx solid #ff4040;
				color: #ff4040;
			}
		}

		.video {
			width: 100%;

			uni-video {
				width: 100%;
			}

			.uni-video-container {
				width: 100%;
			}

			.video_btn {
				width: 180rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				background: #267dff;
				opacity: 1;
				border-radius: 12rpx;
				color: #ffffff;
				font-size: 24rpx;
				margin: 20rpx auto 0;
			}
		}

		.soundPopup {
			padding: 32rpx;
			text-align: center;

			image {
				width: 96rpx;
				height: 96rpx;
				margin: 28rpx auto 74rpx;
			}

			.sound_footer {
				display: flex;
				font-size: 32rpx;

				.footer1 {
					flex: 5;

				}

				.footer2 {
					flex: 5;
					color: #267DFF;
				}
			}
		}
	}
</style>
